<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>web设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="DataForm" label-width="120px">
        <el-form-item label="网站名称">
          <el-input v-model="DataForm.web_title"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="DataForm.web_domain"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <Image  :modelValue="DataForm.web_iocn"></Image>
        </el-form-item>
        <el-form-item label="备案">
          <el-input v-model="DataForm.web_keep"></el-input>
        </el-form-item>
        <el-form-item label="SEO">
          <el-input v-model="DataForm.web_seo"></el-input>
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="DataForm.web_email"></el-input>
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="DataForm.web_wx"></el-input>
        </el-form-item>
        <el-form-item label="QQ">
          <el-input v-model="DataForm.web_qq"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="DataForm.web_mobile"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio v-model="DataForm.web_statu" :label='1'>上线</el-radio>
          <el-radio v-model="DataForm.web_statu" :label='2'>下线</el-radio>
          <el-radio v-model="DataForm.web_statu" :label='3'>维护</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="DataSumbit">Updata</el-button>
        </el-form-item>
      </el-form>
    </el-card>


  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";
import axios from "@/utils/axios";
import Image from "@/components/Image"

export default {
  components: {Image},
  setup() {
    const state = reactive({
      DataForm: {},
    })
    onMounted(() => {
      GetData();
    })

    //提交更新/新加
    const DataSumbit = async () => {
      const {data: res} = await axios.post('whois', state.DataForm)
      if (res.code !== 1000) return ElMessage.error(res.msg)
      ElMessage.success("成功")
    }

    // 获取列表
    const GetData = async () => {
      const {data: res} = await axios.get('whois')
      if (res.code !== 1000) return ElMessage.error(res.msg)
      state.DataForm = res.data
    }


    return {
      ...toRefs(state),
      GetData,
      DataSumbit
    }
  }
}
</script>

<style scoped>

</style>